<template>
  <div class="medical-report">
    <div class="panel">
      <div class="panel-title">上传体检报告</div>
      <div class="panel-content content">
        <div class="uploadTitle">体检报告上传</div>
        <el-upload
          class="upload-demo"
          :action="apiUrl+'/common/annex/?access_token='+token"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-upload="beforeUpload"
          :on-success="handleUpSuccess"
          :file-list="fileList"
          list-type="picture-card">
          <i class="el-icon-plus"></i>
          <!--<div slot="tip" class="el-upload__tip">温馨提示</div>-->
          <div slot="tip" class="el-upload__tip">1.最多可上传9张</div>
          <div slot="tip" class="el-upload__tip">2.支持上传PNG、JPEG、WORD、PDF格式的文件</div>
          <div slot="tip" class="el-upload__tip">3.文件大小不超过5M</div>
          <div slot="tip" class="el-upload__tip">4.保证文件清晰</div>
        </el-upload>
        <el-dialog v-model="dialogVisible" size="tiny" :close-on-click-modal="false">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <div><el-button class="lightGreenBtn btn" style="margin-top: 18px;" @click="affirmReport">确认上传体检报告</el-button></div>
      </div>
    </div>
    <!--<div class="panel">-->
      <!--<div class="panel-title">同步体检报告 <span>目前只支持熙康体检用户</span></div>-->
      <!--<div class="panel-content">-->
        <!--<div class="input-item synchronize">-->
          <!--<label>熙康手机号</label>-->
          <!--<el-input style="width:20%!important;">-->
          <!--</el-input>-->
          <!--<el-button class="btn">获取验证码</el-button>-->
        <!--</div>-->
        <!--<div class="input-item synchronize">-->
          <!--<label>手机验证码</label>-->
          <!--<el-input style="width:20%!important;">-->
          <!--</el-input>-->
          <!--<el-button class="lightGreenBtn btn">同步</el-button>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <form id="downBtnForm" method="get"  accept-charset="UTF-8" :action="downLoadUrl" style="display: none;">
      <input type="hidden" name="access_token" :value="token" />
      <input type="submit" value="下载用户体检报告">
    </form>
  </div>
</template>

<script>
  import checkInApi from '../../service/member/checkInApi';
  import {apiUrl} from '../../config/env';
  export default {
    data(){
      return{
        currentMemberObj:{},
        apiUrl,
        token:"",
        currentFileId: "",
        fileList: [],
        dialogVisible:false,
        dialogImageUrl: '',
        downLoadUrl: ''
      }
    },
    props:["currentTasId","member"],
    methods: {
      init(){
        this.token = window.sessionStorage.getItem("access_token");
        this.currentMemberObj = this.$route.params.memberObj;
        this.getReport();
      },
      /**
       * 确认上传体检报告
       */
      affirmReport(){
        var self = this;
        var annexIds = [];
        if(!this.fileList || this.fileList.length == 0){
          this.$message.info('请添加体检报告!');
          return false;
        }
        this.fileList.forEach(function(file){
          annexIds.push(file.id);
        });

        var form = {actId:this.member.actId,memberId:this.member.memberId,annexIds:annexIds,runId:this.member.runId,tasId:this.currentTasId};
        checkInApi.examination(form).then(function(response){
          if(response.body.data){
            if(self.member.taskKeyArr.length==1){
              self.$emit("goto",self.member.taskKeyArr[0]);
            }else{
              //获取当前任务在数组中的位置
              /*var currentIndex = self.member.taskIdArr.indexOf(self.currentTasId);
              self.$emit("goto",self.member.taskKeyArr[currentIndex+1]);*/
              /*var currentIndex = self.member.taskKeyArr.indexOf("inApply_InAssessment");
               if(currentIndex>=0){
               self.$emit("goto","inApply_InAssessment");
               }else{
               self.$emit("goto","inApply_bedAppointment");
               }*/
              if(self.member.taskKeyArr.indexOf("inApply_InAssessment")>=0){
                self.$emit("goto","inApply_InAssessment");
              }else if(self.member.taskKeyArr.indexOf("inApply_servicePlan")>=0){
                self.$emit("goto","inApply_servicePlan");
              }else if(self.member.taskKeyArr.indexOf("inApply_bedAppointment")>=0){
                self.$emit("goto","inApply_bedAppointment");
              }
            }
          }
          self.$message({
            message: '体检报告上传成功',
            type: 'success'
          });
        });
      },
      /**
       * 查询体检报告
       */
      getReport(){
        let self = this;
        checkInApi.getMemberInApplyExamination(self.currentMemberObj.actId).then(
          (response)=>{
            self.fileList = response.data.data;
            for(let i=0;i<self.fileList.length;i++){
//              self.fileList[i].url =self.apiUrl+'/common/annex/'+self.fileList[i].annexId+'?access_token='+window.sessionStorage.getItem("access_token");
              self.fileList[i].url =self.apiUrl+'/'+ self.fileList[i].orgId+self.fileList[i].path+'?access_token='+window.sessionStorage.getItem("access_token");
              self.fileList[i].id =self.fileList[i].annexId;
            }
          }
        );
      },
      handleRemove(file, fileList){
        this.fileList = fileList;
      },
      handlePreview(file){
        if(file.type === "image/jpeg" || file.type==="image/png"){
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        }else{
          this.downLoadUrl = this.apiUrl+'/common/annex/'+file.id
          document.getElementById("downBtnForm").submit();
        }
      },
      beforeUpload(file) {
        const isAccept = file.type==="image/jpeg" || file.type==="image/png" || file.type==="application/pdf" || file.type==="application/msword" || file.type==="application/vnd.openxmlformats-officedocument.wordprocessingml.document";
        if (!isAccept) {
          this.$message.info('上传文件格式不支持!');
          return false;
        }
        const isLt5M = file.size / 1024 / 1024 < 5;
        if(!isLt5M){
          this.$message.info('上传文件大小不能超过 5MB!');
          return false;
        }
        if(this.fileList.length > 8){
          this.$message.info('上传文件数量不超过9个!');
          return false;
        }
        return true;
      },
      handleUpSuccess(response,file, fileList){
        var annex = response.data;
        if(!(annex.suffix=='jpeg' || annex.suffix=='png' || annex.suffix=='jpg')){
           annex.url="http://10.32.68.13/images/commonFile.png";
        }
        this.fileList.push({name:annex.name,url:annex.url +'?access_token='+this.token,id:annex.annexId,type:file.raw.type});
      }
    },
    mounted: function () {
      this.init();
    }
  }
</script>

<style>
  .medical-report{
    /*border: 1px solid #dfe6ec;*/
  }
  .medical-report .panel-title{
    margin: 0;
    width:auto;
    font-size: 14px;
  }
  .medical-report ul.el-upload-list{
       width: 250px;
  }
  .medical-report ul.el-upload-list li{
    display: inline-block;
  }
  .medical-report .uploadTitle{
    margin-bottom:7px;
  }
  .medical-report .panel .panel-content{
    padding:10px 25px;
  }
  .medical-report .panel .panel-content .synchronize{
    margin-bottom:10px;
  }
  .medical-report .panel .panel-content .synchronize label{
    margin-right:7px;
  }
  .medical-report .panel .panel-content .synchronize .btn{
    width:100px;
  }
</style>
